﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="Generator" content="xnr®">
  <meta name="Author" content="小男人-923227829@qq.com">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>字典配置</title>
  <link rel="stylesheet" href="../inc/layui/css/layui.css">
  <link rel="stylesheet" href="../css/comm.css">
  <style>
    .layui-btn-xstree {
      height: 35px;
      line-height: 35px;
      padding: 0px 5px;
      font-size: 12px;
    }

    .layui-form-radio {
      display: inline-block;
      vertical-align: middle;
      line-height: 28px;
      margin: 6px 10px 0 0;
      padding-right: 10px;
      cursor: pointer;
      font-size: 0;
    }

    .layui-border-box {
      height: auto !important;
    }
  </style>
</head>

<body>
  <!--<div class="demoTable" style="margin-bottom: 10px;">
    <button class="layui-btn" data-type="add">新增基节点</button>
</div>
-->
  <table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
</body>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>

<script type="text/html" id="formTp2">
    <div id="form1" class="layui-form" style="margin-top: 20px;margin-right: 20px;">
        <input type="hidden" value="{{d.dictPid}}" name="dictPid" id="udictPid"/>
        <input type="hidden" value="{{d.dictId}}" name="dictId" id="udictId"/>
        <div class="layui-form-item">
            <label class="layui-form-label">字典名称</label>
            <div class="layui-input-block">
                <input value="{{d.dictName}}" type="text" name="dictName" lay-verify="required" id="udictName"
                       autocomplete="off" placeholder="请输入配置名称" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">字典值</label>
            <div class="layui-input-block">
                <textarea name="dictValue" id="dictValue" autocomplete="off" placeholder="字典值"
                          class="layui-textarea">{{d.dictValue}}</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="dictDesc" id="dictDesc" autocomplete="off" placeholder="如果扩展内容请使用json格式"
                          class="layui-textarea">{{d.dictDesc}}</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="fr">
                <button class="layui-btn layui-btn-danger" lay-submit="" lay-filter="sub">保存</button>
                <button class="layui-btn layui-btn-primary" id="closeform">取消</button>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="formTpl">
    <div id="form" class="layui-form" style="margin-top: 20px;margin-right: 20px;">
        <div class="layui-form-item">
            <label class="layui-form-label">字典名称</label>
            <div class="layui-input-block">
                <input value="" type="text" name="dictName" lay-verify="required" id="dictName"
                       autocomplete="off" placeholder="请输入配置名称" class="layui-input"/>
            </div>
        </div>

        {{# if(!d.isUpd){ }}
        <div class="layui-form-item">
            <label class="layui-form-label">字典code</label>
            <div class="layui-input-block">
                <input value="" type="text" name="dictCode" lay-verify="required" id="dictCode"
                       autocomplete="off" placeholder="请输入配置值" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限控制</label>
            <div class="layui-input-block">
                <!-- <input value="{{d.childrenLimit}}" type="text" name="dictLower" lay-verify="required" id="dictLower"
                        autocomplete="off" placeholder="0不限制，1不能更新，2不能增加子列，3只读(相当于1+2)" class="layui-input"/>-->
                <select name="dictLower" lay-filter="dictLower" id="dictLower">
                    <option value="1">无限制</option>
                    <option value="0" selected>不能增加子列</option>
                </select>
            </div>
        </div>
        {{# } }}
        <div class="layui-form-item">
            <label class="layui-form-label">字典值</label>
            <div class="layui-input-block">
                <input value="" type="text" name="dictValue" lay-verify="required" id="dictValue"
                       autocomplete="off" placeholder="请输入配置名称" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="dictDesc" id="dictDesc" autocomplete="off" placeholder="如果扩展内容请使用json格式"
                          class="layui-textarea">{{d.remark}}</textarea>
            </div>
        </div>
        <div class="layui-form-item center">
                <button class="layui-btn layui-btn-danger" lay-submit="" lay-filter="sub">保存</button>
                <button class="layui-btn layui-btn-primary" id="closeform">取消</button>
        </div>
    </div>
</script>
<script type="text/html" id="isEnable">
    {{#if (d.dictStatus == 1){ }}
    <span style='color: #09b825'>启用</span>
    {{# } else { }}
    <span style='color: #b80f07'>禁用</span>
    {{#}}}
</script>

<script type="text/javascript" src="../inc/g.js"></script>
<script type="text/javascript" src="../inc/layui/layui.js"></script>
<script type="text/javascript">
  /**
   * 对layui进行全局配置
   */
  layui.extend({
    treeGrid: '../../inc/layui/lay/treeGrid'
  })


  function pageload() {
    layui.use(['tree', 'treeGrid'], function () {
      Comm.treeGrid = layui.treeGrid, active = {
        add: function () {
          save(null, 0)
        }
      };

      Comm.treeGrid.render({
        id: 'treeTable'
        , elem: '#treeTable'
        , url: '/admin/dict/list'
        , cellMinWidth: 100
        , idField: 'dictId'//必須字段
        , treeId: 'dictId'//树形id字段名称
        , treeUpId: 'dictPid'//树形父id字段名称
        , treeShowName: 'dictName'//以树形式显示的字段
        , heightRemove: [".dHead", 100]//不计算的高度,表格设定的是固定高度，此项不生效
        , height: '100%'
        , isFilter: false
        , iconOpen: true//是否显示图标【默认显示】
        , isOpenDefault: false//节点默认是展开还是折叠【默认展开】
        , loading: true
        , method: 'get'
        , cols: [[
          // , { type: 'radio', width: 80, align: 'center' }
          { field: 'dictName', title: '名称'/*, width: 250*/ }
          /*       , {field: 'dictcode', title: 'code', width: 120}
                 , {field: 'dicttype', title: 'type', width: 120}
                 , {field: 'dictId', title: 'id', width: 100}*/
          , { field: 'dictValue', title: 'value', width: 150 }
          , { field: 'dictDesc', title: '描述' }
          , {
            field: 'dictStatus', title: '是否禁用', templet: "#isEnable", width: 100
          }
          , {
            title: '操作', /*width: 300,*/ align: 'center', templet: function (d) {
              var all = '';
              if (d.dictLower == 1) {
                var addBtn = '<a class="layui-btn layui-btn-primary  layui-btn-xs" lay-event="add">添加子级</a>';
                all += addBtn;
              }
              var editBtn = '<a class="layui-btn layui-btn-primary  layui-btn-xs" lay-event="edit">修改</a>';
              all += editBtn;

              if (d.dictPid != 0 || d.dictPid != '0') {
                var str = ""
                if (d.dictStatus == 1) {
                  str = "禁用"
                } else {
                  str = "启用"
                }
                var delBtn = '<a class="layui-btn layui-btn-danger  layui-btn-xs" lay-event="del">' + str + '</a>';
                all += delBtn;
              }
              //var ttopBtn = '<a class="layui-btn layui-btn-primary  layui-btn-xs" lay-event="ttop">置顶</a>';
              //var topBtn = '<a class="layui-btn layui-btn-primary  layui-btn-xs" lay-event="top">上移</a>';
              //var downBtn = '<a class="layui-btn layui-btn-primary  layui-btn-xs" lay-event="down">下移</a>';

              return all;
            }
          }
        ]]
        , isPage: false
        , parseData: function (res) {//数据加载后回调
          return res;
        }
        , onClickRow: function (index, o) {
          console.log(index, o, "单击！");
        }
        , onDblClickRow: function (index, o) {
          console.log(index, o, "双击");
        }
      });

      Comm.treeGrid.on('tool(treeTable)', function (obj) {
        if (obj.event === 'edit') {//修改行
          var d = obj.data
          Comm.laytpl($("#formTp2").html()).render(d, function (html) {
            //多窗口模式，层叠置顶
            layer.open({
              type: 1,
              title: "编辑字典",
              shade: 0.3,
              area: ['600px', '400px'],
              //maxmin: true,
              content: html,
              zIndex: layer.zIndex,  //重点1
              success: function (layero) {
                Comm.form.render();
                Comm.form.verify();
                //监听指定开关

                Comm.form.on('submit(sub)', function (data) {

                  AJAX.POST("/admin/dict/update", data.field, function (d) {
                    if (d.code == 1) {
                      layer.closeAll();
                      layer.msg("保存成功!", { icon: 1 })
                      //执行重载
                      Comm.treeGrid.reload('treeTable', {});
                    } else {
                      layer.msg(d.msg, { icon: 5 })
                    }
                  }, true, true)
                });
                $("#closeform").click(function () {
                  layer.closeAll();
                })
              },
            });
          })
        } else if (obj.event === "add") {//添加行
          save(null, obj.data.dictId)
        } else if (obj.event === "ttop") {//置顶
          uporder(0, obj.data.dictId)
        } else if (obj.event === "top") {//上移
          uporder(-1, obj.data.dictId)
        } else if (obj.event === "down") {//下移
          uporder(1, obj.data.dictId)
        } else if (obj.event === "del") {//删除
          var en = 0
          var msg = ""
          if (obj.data.dictStatus == 1) {
            en = 0;
            msg = "已禁用";
          } else {
            en = 1;
            msg = "已启用";
          }

          AJAX.POST('/admin/dict/setEnable', { dictId: obj.data.dictId, enable: en }, function (d) {
            if (d.code == 1) {
              obj.update({
                enable: en
              })

              //执行重载
              Comm.treeGrid.reload('treeTable', {});
              layer.msg(msg, { icon: 1 })
            } else {
              layer.msg(d.msg, { icon: 5 })
            }
          })
        }
      });

      //编辑
      function uporder(n, id) {
        AJAX.POST('/admin/dict/update', { dictId: id, direction: n }, function (d) {
          if (d.code == 1) {
            window.sessionStorage["__dict"] = "";
            //执行重载
            Comm.treeGrid.reload('treeTable', {});
            layer.msg("操作成功!", { icon: 1 })
          } else {
            layer.msg(d.msg, { icon: 5 })
          }
        }, true, true)
      }

      //添加按钮点击事件
      $('.demoTable .layui-btn').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
      });

    })

  }

  //保存方法
  function save(d, pid) {
    var title = "新增字典配置", url = "/admin/dict/add";
    d = { name: "", code: "", dictType: "", remark: "", pid: pid, dictid: '' };
    Comm.laytpl($("#formTpl").html()).render(d, function (html) {
      //多窗口模式，层叠置顶
      layer.open({
        type: 1,
        title: title,
        shade: 0.3,
        area: ['600px', '450px'],
        //maxmin: true,
        content: html,
        zIndex: layer.zIndex,  //重点1
        success: function (layero) {
          Comm.form.render();
          Comm.form.verify();
          //监听指定开关

          Comm.form.on('submit(sub)', function (data) {
            data.field.dictPid = pid;
            AJAX.POST(url, data.field, function (d) {
              if (d.code == 1) {
                layer.closeAll();
                layer.msg("保存成功!", { icon: 1 })
                //执行重载
                Comm.treeGrid.reload('treeTable', {});
              } else {
                layer.msg(d.msg, { icon: 5 })
              }
            }, true, true)
          });
          $("#closeform").click(function () {
            layer.closeAll();
          })
        },
      });
    })
  }
</script>

</html>